<script setup lang="ts">
import Tel from './Tel.tsx'

import gsap from 'gsap'

const instance = getCurrentInstance()
const emit = () => {
  // instance?.proxy?.$Bus.emit('')
}
// instance?.proxy?.$Bus.on('on-xiaomi', (str) => {})
/**
 * @description
 * @param {string} 事件名 type
 * @param {str} 传递参数 str
 * @return {void}
 */
// instance?.proxy?.$Bus.on('*', (type, str) => {})
// instance?.proxy?.$Bus.off('事件名','事件名对应的函数体')
// instance?.proxy?.$Bus.all.clear()
const Man = ref({ name: '小马' })
const input = ref('')
const flag = ref<Boolean>(true)
const change = () => {
  Man.value.name = '大马'
}
const getItem = (v: any) => {
  console.log(v, '父组件接收到了')
}
let name = computed(() => Man.value.name + 'ppp')

const main = ref<HTMLDivElement>()
// 给父级传值
// const emit = defineEmits(['on-click'])
// emit('on-click', '小满')

// 接受父级传值
// const props = defineProps({
//   title: {
//     type: String,
//     default: '默认值'
//   }
// })
// console.log(props.title)

const props = withDefaults(
  defineProps<{
    msg?: string
    labels?: string[]
  }>(),
  {
    msg: 'hello',
    labels: () => ['one', 'two']
  }
)
console.log(props.msg, props.labels)
// 创建
onBeforeMount(() => {
  console.log(main.value)
})
onMounted(() => {
  console.log(main.value)
})
// 更新的钩子
onBeforeUpdate(() => {})
onUpdated(() => {})
// keep-alive
onActivated(() => {
  console.log('keep-alive初始化')
})
onDeactivated(() => {
  console.log('keep-alive卸载')
})
// 销毁
onBeforeUnmount(() => {})
onUnmounted(() => {})

const EnterFrom = (el: Element) => {
  console.log('进入之前')
  gsap.set(el, {
    width: 0,
    height: 0
  })
}
const EnterActive = (el: Element, done: gsap.Callback) => {
  console.log('过度曲线')
  gsap.to(el, {
    width: 200,
    height: 200,
    onComplete: done
  })
  // setTimeout(() => {
  //   done()
  // }, 3000)
}
const EnterTo = (el: Element) => {
  console.log('过度完成')
}
const EnterCancel = (el: Element) => {
  console.log('过度效果被打断')
}

const LeaveFrom = (el: Element) => {
  console.log('离开之前')
}
const LeaveActive = (el: Element, done: gsap.Callback) => {
  console.log('离开曲线')
  gsap.to(el, {
    width: 0,
    height: 0,
    onComplete: done
  })
  // setTimeout(() => {
  //   done()
  // }, 3000)
}
const LeaveTo = (el: Element) => {
  console.log('离开完成')
}
const LeaveCancel = (el: Element) => {
  console.log('离开效果被打断')
}
</script>

<template>
  <Tel name="小满props" @on-click="getItem"></Tel>
  <el-row class="mb-4">
    <el-button round>Round</el-button>
    <el-button type="primary" round>Primary</el-button>
    <el-button type="success" round>Success</el-button>
    <el-button type="info" round>Info</el-button>
    <el-button type="warning" round>Warning</el-button>
    <el-button type="danger" round>Danger</el-button>
  </el-row>
  <el-input v-model="input" placeholder="Please input" />
  <div ref="main" class="xm-test">
    title
    <div class="xm-test__inner">{{ Man }}</div>
    <div class="xm-test--success">{{ Man }}</div>
  </div>
  {{ name }}
  <i class="iconfont icon-yonghuguanli"></i>
  <button @click="change">修改</button>

  <button @click="flag = !flag">switch</button>
  <transition
    @before-enter="EnterFrom"
    @enter="EnterActive"
    @after-enter="EnterTo"
    @enter-cancelled="EnterCancel"
    @before-leave="LeaveFrom"
    @leave="LeaveActive"
    @after-leave="LeaveTo"
    @leave-cancelled="LeaveCancel"
  >
    <!-- leave-active-class="animate__animated animate__fadeOut" -->
    <!-- enter-active-class="animate__animated animate__fadeIn" -->
    <div class="box" v-if="flag"></div>
  </transition>
</template>

<style lang="scss">
@include b(test) {
  color: $--color-danger;
  @include e(inner) {
    color: $--color-primary;
  }
  @include m(success) {
    color: $--color-success;
  }
}
.box {
  width: 200px;
  height: 200px;
  background-color: $--color-danger;
}
</style>
